<template>
    <div>
        <el-form v-model="itemData" class="form-box" label-width="150px">
            <el-row :gutter="20">
                <el-col :lg="24">
                    <template>
                        <el-form-item class="form-item" label="标签名称：">
                            <el-input v-model="itemData['name']" style="width: 80%" autocomplete="off"></el-input>
                        </el-form-item>
                     </template>
                </el-col>
                <el-col :lg="24">
                    <template v-if="isEdit">
                        <el-form-item class="form-item" label="技术领域：">
                            <el-cascader
                                v-model="itemData['technical_field']"
                                 style="width: 80%"
                                :options="singleFilterData"
                                :props="{ multiple: true }"
                                collapse-tags
                                clearable></el-cascader>
                        </el-form-item>
                     </template>
                    <el-form-item v-else class="form-item">
                        <span class="col-span">{{ item1.name }}</span>
                        <template>
                            <span style="margin-right: 10px" v-for="(v,i) in itemData['technical_field']" :key="i"> 
                                <el-tag type="primary">{{v}}</el-tag>
                            </span>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-btn" v-if="isEdit">
            <el-button type="primary" @click="submit">保存</el-button>
        </div>
        
    </div>
    
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    name: 'Talent',
    props: {
        singleFilterData: Array,
        isEdit: Boolean,
        id: String
    },
    data() {
        return {
            itemData: {}
        }
    },
    mounted() {
        if(this.id) {
            this.getDetail()
        }
        
    },
    methods: {
        getDetail() {

        },
        submit() {
            console.log(this.itemData)
            if(!this.itemData['name']) {
                this.$message.error('请输入名称')
                return false
            }
            if(!this.itemData['technical_field']) {
                this.$message.error('请选择技术领域')
                return false
            }
            this.$emit('submit',this.itemData)
            
        }

    },
    watch: {

    }
}
</script>
<style lang="scss" scoped>
.form-box {
    padding: 0 20px 20px 20px;
    min-height: 300px;
}
.form-title {
    font-size: 18px;
    margin: 10px 0 30px 0;
}
.form-btn {
    text-align: right;
}
</style>


